import React from 'react'
import {Image,View,Text,ImageBackground,DeviceEventEmitter} from 'react-native';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import Constants from '../utils/Constants';
import Home from './Home/Home';
import Money from './Money/Money';
import Vip from './Vip/Vip';
import Team from './Team/Team';
import Account from './Account/Account';
import screen from '../utils/screen';
import Images from '../images/Images';
import AppTabBar from '../widgets/AppTabBar';
import AppEvent from '../utils/AppEvent';


const MiddleItem = (tabBarTitle, imageNormal,imageSel,onPress) => {

    const tabBarIcon = (({tintColor,focused})=> {

        return(

            <ImageBackground
                source={Images.tab_money_bg}
                // resizeMode={'contain'}
                style={{width:120,height:80,alignItems : 'center',justifyContent : 'flex-end'}}
            >
                <Image source={focused ? imageSel : imageNormal}
                       style={{height:20,width:20}}
                       resizeMode={'contain'}
                />
                <Text style={{color:focused ? '#fff' : 'rgba(255,255,255,0.3)',fontSize:14,marginBottom:6}}>{tabBarTitle}</Text>

            </ImageBackground>

        )
    });
    const tabBarVisible = true;
    const tabBarOnPress = onPress
    return { tabBarIcon, tabBarVisible ,header :null,tabBarOnPress };
};

export const TabOptions = (tabBarTitle, imageNormal,imageSel,onPress) => {

    const tabBarIcon = (({tintColor,focused})=> {


        return(

            <View style={{flex:1,alignItems : 'center',justifyContent : 'center'}}>
                <Image source={focused ? imageSel : imageNormal}
                       style={{height:20,width:20}}
                       resizeMode={'contain'}
                />
                <Text style={{color:focused ? '#fff' : 'rgba(255,255,255,0.3)',fontSize:14}}>{tabBarTitle}</Text>

            </View>

        )
    });
    const tabBarVisible = true;
    const tabBarOnPress = onPress
    return { tabBarIcon, tabBarVisible ,header :null,tabBarOnPress };
};




const MainTab = createBottomTabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions:({navigation})=>{
                return TabOptions(Constants.home.tab_title,Images.tab_home,Images.tab_home_sel)
            }
        },
        Vip: {
            screen: Vip,
            navigationOptions:({navigation})=>{

                return TabOptions(Constants.vip.tab_title,Images.tab_vip,Images.tab_vip_sel,()=>{
                    if(!global.token){
                        DeviceEventEmitter.emit(AppEvent.login_expire)
                    }else{
                        navigation.navigate('Vip')
                    }
                })
            }
        },
        Money: {
            screen: Money,
            navigationOptions:({navigation})=>{

                return MiddleItem(Constants.account.invest,Images.tab_money,Images.tab_money,()=>{
                    if(!global.token){
                        DeviceEventEmitter.emit(AppEvent.login_expire)
                    }else{
                        navigation.navigate('Money')
                    }
                })
            }
        },

        Team: {
            screen: Team,
            navigationOptions:({navigation})=>{
                return TabOptions(Constants.team.tab_title,Images.tab_team,Images.tab_team_sel,()=>{
                    if(!global.token){
                        DeviceEventEmitter.emit(AppEvent.login_expire)
                    }else{
                        navigation.navigate('Team')
                    }
                })
            }
        },
        Account: {
            screen: Account,
            navigationOptions:({navigation})=>{
                return TabOptions(Constants.account.tab_title,Images.tab_mine,Images.tab_mine_sel,()=>{
                    if(!global.token){
                        DeviceEventEmitter.emit(AppEvent.login_expire)
                    }else{
                        navigation.navigate('Account')
                    }
                })
            }
        },
    },
    {
        animationEnabled:true,
        backBehavior: 'none',
        initialRouteName: 'Home',
        tabBarComponent:AppTabBar,
        tabBarOptions: {
            showIcon: true,

            style: {
                position:'absolute',
                // bottom:0,
                backgroundColor: '#3F8A83',
                height: screen.PIXEL_120,
                borderTopWidth:screen.onePixel,
                borderTopColor:'#DEDEDE',
                zIndex:999
            },
            // indicatorStyle:{
            //     height:0,
            // },

            labelStyle: {
                fontSize: screen.setSpText(20),
                fontWeight:'600'
            },
            //tabStyle:{backgroundColor:'#9524d3',},
            showLabel: false,
            // inactiveBackgroundColor:'#FFFFFF',
        },
    });

export default MainTab
